<template>
	<view class="content-box">
		<view class="nav">
			<image class="back" @click="goBack" src="../../static/pages/back.png"></image>
			<view class="nav-text">动态发布</view>
			<view class="issue yaoqingaaa" @click="fabu">
				发布
			</view>
		</view>
		<view class="blank"></view>
		<view class="record">
			<span class="record-text">0/{{300-textareaValue.length}}</span>
			<textarea v-model="textareaValue" placeholder="请勿发布广告内容，如果需要打广告可联系在线客服，发布广告或不良信息会屏蔽拉黑" maxlength="300" minlength="2" auto-focus></textarea>
		</view>
		<!-- <image class="photo" src="../../static/pages/upload.png"></image> -->
		<imgUpload :count="count" :img_list="img_list" @obtain_img="obtain_img" :name="name" :header="header" :url="url"></imgUpload>
		<view>
			<view class="flexItem ">
				<view class="flexItemMain ">
					<image class="flexItemLeftImg" src="../../static/pages/address.png" mode=""></image>
					<view class="flexItemCenter">
						{{address}}
					</view> 
					<image src="../../static/pages/int.png" class="flexItemRightImg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="buttom">提示：请不要发布广告信息、暴力色情信息、攻击性语言、盗用资料等违规行为，谢谢配合!</view>
	</view>
</template>

<script>
	import imgUpload from '../../components/linzq-imgUpload/linzq-imgUpload.vue'
	export default {
		components:{
			imgUpload
		},
		data() {
			return {
				img_list:[],
				count: 3,
				name: '',   //必填
				url: 'http://c.voofan.com/api/upload',    //必填
				header: {} ,
				textareaValue:'',
				address:'正在获取定位...',
				isProceed: false,
				locationDetails:''
			}
		},
		onLoad() {
			let locationInfo = uni.getStorageSync('locationInfo')
			this.locationDetails = locationInfo;
			if(locationInfo){
				// console.log(uni.getStorageSync('locationInfo'))
				this.address = locationInfo.address
			}else{
				uni.showToast({
					icon:'none',
					title:'请先获取定位'
				})
			}
		},
		methods: {
			obtain_img(data) {
				// console.log(data, "获取到的图片组" + data.length + "张")
				this.img_list = data
			},
			fabu(){
				if(this.isProceed) {
					return
				}
				this.isProceed = true;
				let that = this
				let paramData={
					content:this.textareaValue,
					image:JSON.stringify(this.img_list),
					longitude:this.locationDetails.longitude,
					latitude:this.locationDetails.latitude,
				}
				this.$utils.postrequest("/api/dynamic/add", paramData, function (res) {
					// console.log('res',res)
				   if(res.code==200){
					   that.$utils.showLayer('发布成功')
					   setTimeout(function(){
						   uni.switchTab({
						   	url:'/pages/index/index'
						   })
					   },800)
					   
					}else{
						that.isProceed = false;
						that.$utils.showLayer(res.message)
					}
				})
			},
			goBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
		padding-top: 0 !important;
	}
	.content-box {
		background-color: white;
		margin-top: -70rpx;
		padding-bottom: 70rpx;
		padding-top: 100rpx;
	}
	.nav {
		display: flex;
		flex-wrap: wrap;
		margin: 109rpx 31rpx 0rpx 31rpx;
	}

	.back {
		margin-top: 12rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.nav-text {
		font-size: 32rpx;
		margin: 12rpx 0rpx 0rpx 230rpx;
	}

	.issue {
		margin-left: 159rpx;
		width: 135rpx;
		height: 62rpx;
	}

	.blank {
		margin-top: 25rpx;
		background: #E2E0EB;
		width: 100%;
		height: 3rpx;
	}

	.record {
		margin: 35rpx 0rpx 0rpx 31rpx;
		position: relative;
		width: 688rpx;
		height: 278rpx;
		background: #F6F7F9;
		border: 1rpx solid #E2E0EB;
		/* border: 1rpx solid black; */
		border-radius: 6rpx;
	}
    .record-text{
		position: absolute;
		margin: 224rpx 0rpx 0rpx 600rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		
		color: #BEBDC5;
		line-height: 19rpx;
	}
	textarea {
		margin: 38rpx 0rpx 0rpx 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		
		color: #C8C9CB;
		line-height: 40rpx;
	}

	.photo {
		width: 220rpx;
		height: 220rpx;
		margin: 34rpx 0rpx 0rpx 34rpx;
	}
	.flexItemMain {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding:38rpx 0;
	}
	
	.flexItemLeft {
		flex: none;
		border-radius: 100%;
		overflow: hidden;
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}
	
	.flexItemLeftImg {
		width: 30rpx;
		height: 30rpx;
		flex: none;
		margin-right: 12rpx;
		margin-left: 30rpx;
	}
	
	.flexItemCenter {
		flex: auto;
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		
		color: #AFAFBB;
		line-height: 19rpx;
	}
	
	.flexItemRightImg {
		width: 21rpx;
		height: 21rpx;
		flex: none;
		margin-right: 25rpx;
		/* margin-left: 30rpx; */
	}
	
	.flexItemXian {
		margin-right: 48rpx;
		margin-left: 48rpx;
		height: 1rpx;
		background: #F6F8F7;
	}
	.buttom{
		margin: 500rpx 50rpx 0rpx 52rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		
		color: #BFBDC5;
		line-height: 37rpx;
	}
	.yaoqingaaa{
		background-color:rgba(23, 162, 249, 1);
		color:white;
		display:flex;
		justify-content: center;
		align-items: center;
		border-radius: 100rpx;
	}
</style>
